<template>
  <div class="singer_detail_container">
    <div class="singer_detail_wrap">
      <div class="singer_detail">
        <div class="singer_cover">
          <div class="singer_name">
            <i>{{ artistBriefInfo.name }}</i>
            <span>{{ nickName }}</span>
          </div>
          <div class="img_show">
            <img
              :src="`${artistBriefInfo.picUrl}?param=640y300`"
              :alt="artistBriefInfo.name"
            />
            <span>
              <SvgIcon class="icon_collect" icon="icon-collect-copy"></SvgIcon>
              <i class="singer_collect">收藏</i>
            </span>
          </div>
        </div>
        <ul class="detail_tabs">
          <li class="active">
            <router-link
              :to="{
                path: '/singer/detail/hotsongs',
                query: { id: artistBriefInfo.id },
              }"
              active-class="active"
            >
              热门作品
            </router-link>
          </li>
          <li>
            <router-link
              :to="{
                path: '/singer/detail/albums',
                query: { id: artistBriefInfo.id },
              }"
              active-class="active"
              >所有专辑</router-link
            >
          </li>
          <li>
            <router-link
              :to="{
                path: '/singer/detail/mv',
                query: { id: artistBriefInfo.id },
              }"
              active-class="active"
              >相关MV</router-link
            >
          </li>
          <li>
            <router-link
              :to="{
                path: '/singer/detail/desc',
                query: { id: artistBriefInfo.id },
                params: { name: artistBriefInfo.name },
              }"
              active-class="active"
              >艺人介绍</router-link
            >
          </li>
        </ul>
        <!-- keep-alive 缓存 -->
        <!-- <keep-alive> -->
        <router-view key="key"></router-view>
        <!-- </keep-alive> -->
      </div>
      <div class="singer_offside">
        <SimiAritist :simiArtistInfo="simiArtistInfo" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SingerDetail',
}
</script>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { reqArtistAlbums, reqSimiArtist } from '@/api/singerDetail'
import {
  ArtistBriefInfo,
  SimiArtistList,
} from '@/api/modules/singerDetailModel'
import SimiAritist from './SimiArtist/index.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'

const route = useRoute()
const router = useRouter()

const nickName = ref('')
// 歌手详情封面数据
const artistBriefInfo = ref<ArtistBriefInfo>({
  id: '',
  alias: [],
  name: '',
  picUrl: '',
})
// 相似歌手数据
const simiArtistInfo = ref<SimiArtistList>([
  {
    id: '',
    name: '',
    picUrl: '',
  },
])

// 获取相似歌手
const getSimiArtist = async () => {
  const id = route.query.id as string
  const res = await reqSimiArtist({ id })
  //   console.log(res)
  simiArtistInfo.value = res.artists
}
// 点击播放歌曲对应的Mv
const toSongMV = async (mvId: number) => {}
const getArtistAlbums = async () => {
  const id = route.query.id as string
  const res = await reqArtistAlbums({ id })
  artistBriefInfo.value = res.artist
  nickName.value = artistBriefInfo.value.alias.join(';')
}

// 一上来就加载
onMounted(async () => {
  getArtistAlbums()
})
onMounted(async () => {
  getSimiArtist()
})
watch(
  route,
  (newVal) => {
    artistBriefInfo.value.id = newVal.query.id as string
    console.log(artistBriefInfo.value.id)
    getArtistAlbums()
    getSimiArtist()
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.singer_detail_container {
  .singer_detail_wrap {
    width: 980px;
    border: 1px solid #d3d3d3;
    margin: 0 auto;
    display: flex;
    justify-content: left;
    .singer_detail {
      width: 709px;
      padding: 47px 30px 40px 39px;
      border-right: 1px solid #d3d3d3;
      .singer_cover {
        width: 640px;
        .singer_name {
          height: 34px;
          color: #333;
          i {
            font-size: 24px;
            line-height: 24px;
          }
          span {
            font-size: 14px;
            padding-left: 10px;
            color: #999;
            line-height: 32px;
          }
        }
        .img_show {
          position: relative;
          width: 640px;
          img {
            width: 640px;
            height: 300px;
          }
          span {
            position: absolute;
            bottom: 18px;
            right: 20px;
            width: 76px;
            height: 32px;
            height: 32px;
            font-size: 12px;
            color: #fff;
            background-color: #1b1c1c;
            .icon_collect {
              margin-left: 10px;
              font-size: 22px;
              height: 32px;
            }
            .singer_collect {
              position: absolute;
              width: 30px;
              margin-left: 10px;
              height: 32px;
              line-height: 32px;
              top: 0;
              bottom: 0;
            }
            &:hover {
              cursor: pointer;
              transform: scale(1.1);
            }
          }
        }
      }
      .detail_tabs {
        width: 640px;
        display: flex;
        justify-content: space-around;
        text-align: center;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        li {
          width: 160px;
          height: 37px;
          color: #333;
          a {
            display: inline-block;
            width: 160px;
            height: 37px;
            line-height: 37px;
            font-size: 14px;
            color: #333;
            border-top: 2px solid transparent;
            border-bottom: 1px solid #ccc;
            &:hover {
              border-top: 2px solid #d13030;
            }
          }
          .active {
            border-top: 2px solid #d13030;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>
